<template>
  <div class="content">
    <!--    户表昨日用量排名前十-->
    <div class="content-top">
      <div class="content-top-left">
<!--        <span class="active">大用户表</span>-->
<!--        <span>最近七天设备用量</span>-->
        <span class="active">近七天用量</span>
        <span :class="activeIndex === 1 ? 'active-type' : ''" @click="changeTab(1)">大用户表</span>
        <span :class="activeIndex === 0 ? 'active-type' : ''" @click="changeTab(0)">户表</span>
      </div>
    </div>
    <div class="content-bottom">
      <div id="main1" ref="main" style="width:100%;height:24vh;font-family: 'Adobe 仿宋 Std R';"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import Treeselect from "@riophae/vue-treeselect";

export default {
  name: 'RecentlyDosageDb',
  data() {
    return {
      activeIndex: 1,
      config: {},
      option: {
        tooltip: {//鼠标指上时的标线
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            lineStyle: {
              color: '#fff'
            }
          }
        },
        grid: {
          x: 20,
          y: 25,
          x2: 5,
          y2: 0,
          containLabel: true,
          right: 38,
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
          },
          data: []
        }],
        yAxis:[{
          type: 'value',
          // name: '抄回数',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B',
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
            formatter: '{value} m³'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
              type: 'dotted',
            }
          },
          // position: 'left',
        }],
        series: [{
          name: '',
          type: 'line',
          animationDuration: 2000,
          animationEasing: 'quarticln',
          smooth: true,
          symbol: 'triangle',
          symbolSize: 10,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' m³';
            }
          },
          lineStyle: {
            color: '#5470C6',
            width: 2,
            // type: 'dashed'
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: '#EE6666',
            color: 'rgb(212,74,0)'
          },

          // areaStyle: {
          //   opacity: 0.8,
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     {
          //       offset: 0,
          //       color: 'rgb(212,74,0)'
          //     },
          //     {
          //       offset: 1,
          //       color: 'rgba(212,74,0,0)'
          //     }
          //   ])
          // },
          emphasis: {
            focus: 'series'
          },
          data: []
        }]
      },
      dataDb: [],
      dataXb: [],
    }
  },
  mounted() {
    this.timeFun()
  },
  methods: {
    changeTab(index) {
      this.setActiveItem(index)
    },
    // 设置当前展示的图表
    setActiveItem(index) {
      this.activeIndex = index
      this.renderChart()
    },
    updateListDb(data) {
      this.dataDb = data
      this.renderChart()
      // dataList.push({
      //   name: '2024-07-08',
      //   value: 111
      // },{
      //   name: '2024-07-09',
      //   value: 22
      // },{
      //   name: '2024-07-10',
      //   value: 113
      // },{
      //   name: '2024-07-11',
      //   value: 44
      // },{
      //   name: '2024-07-12',
      //   value: 55
      // },{
      //   name: '2024-07-13',
      //   value: 6
      // },{
      //   name: '2024-07-14',
      //   value: 88
      // },)
      // this.config = {
      //   data: dataList,
      //   showValue: true,
      //   fontSize: 10,
      //   sort: false,
      //   unit: 'm³'
      // }
    },
    updateListXb(data) {
      this.dataXb = data
    },
    renderChart() {
      if(this.dataXb.length > 0 && this.activeIndex === 0){
        let dataList = []
        let xAxisList = []
        this.dataXb.forEach(item => {
          if(item.usage === null){
            item.usage = ''
          }
          let listItem = [item.date, item.usage]
          xAxisList.push(item.date)
          dataList.push(listItem)
        })
        xAxisList.sort((a, b) => {
          return Date.parse(a) - Date.parse(b)
        })
        this.option.xAxis[0].data = xAxisList
        this.option.series[0].data = dataList
        this.initEcharts()
      }else if(this.dataDb.length > 0 && this.activeIndex === 1) {
        let dataList = []
        let xAxisList = []
        this.dataDb.forEach(item => {
          if(item.usage === null){
            item.usage = ''
          }
          let listItem = [item.date, item.usage]
          xAxisList.push(item.date)
          dataList.push(listItem)
        })
        xAxisList.sort((a, b) => {
          return Date.parse(a) - Date.parse(b)
        })
        this.option.xAxis[0].data = xAxisList
        this.option.series[0].data = dataList
        this.initEcharts()
      }
    },
    // 初始化图表
    initEcharts() {
      let myChart = echarts.init(this.$refs.main);
      myChart.setOption(this.option);
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    // 定时器 控制展示的是大用户表内容还是户表内容
    timeFun() {
      let timer = null
      timer = setInterval(() => {
        if (this.activeIndex >= 1) {
          // this.getListXb()
          this.activeIndex = 0
          this.renderChart()
        } else {
          // this.getListDb()
          this.activeIndex++
          this.renderChart()
        }
      }, 20000)
    }
  }
}
</script>
<style lang="scss" scoped>
.content-top {
  //padding: 0.2rem 0 0.1rem 0.2rem;
  height: 5.5vh;
  line-height: 5.5vh;
  padding-left: .2rem;
  cursor: pointer;
  .content-top-left {
    span {
      color: #00d8ff;
      font-size: .2rem;
      font-weight: 520;
      font-family: "Adobe 仿宋 Std R";
      padding: 0 .1rem;
    }

    span:first-child {
      border-right: 0.01rem solid #1950c4;
      padding-left: 0;
    }

    span.active {
      color: #fff;
    }
    .active-type {
      font-size: .18rem;
      margin: .1rem;
      padding: .05rem .05rem;
      background: #3aa0e5;
      color: white;
      border-radius: 5px;
    }
  }
}
.content-bottom {
  height: 24vh;
  //background: red;
}
::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
  background-color: #ff8842;
}
</style>
